
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: CSS Grids: Aligning Units</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: CSS Grids: Aligning Units</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>CSS Grids: Aligning Units</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>Aligning YUI Grid units is possible with the basic CSS properties <code>text-align</code> and <code>vertical-align</code>.</p>
	</div>

	<div class="module example-container  newWindow">
			<div id="example-canvas" class="bd">

		<p class="newWindowButton yui-skin-sam">
        <span id="newWindowLink">
            <span class="first-child">
                <a href="cssgrids-align_source.html" target="_blank">View example in new window.</a>
            </span>
        </span>
    </p>

	
		</div>
	</div>
	</div>

	<p>YUI Grids makes it easy to align units in various ways, using basic CSS properties.</p>

<h4>Horizontal Alignment</h4>
<p>Sometimes is it desirable for  units to be horizontally centered when taking up less than 100% of the width of the containing grid.  Rather than setting the alignment for all grids, we will add an <code>ID</code> to target the specific content being aligned.  For this example, the <code>ID</code> "demo" is used, but this should be tailored to your specific content.</p>
<div id="syntax-54f1e70d12577b25d377ba21a285846a" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-g&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>I take up 1/3 of my container.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>I take up 1/3 of my container.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-g&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>I take up 1/3 of my container.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;&lt;<span class="kw2">p</span>&gt;</span>I take up 1/3 of my container.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-54f1e70d12577b25d377ba21a285846a-plain"><div class="yui3-g" id="demo">
    <div class="yui3-u-1-3"><p>I take up 1/3 of my container.</p></div>
    <div class="yui3-u-1-3"><p>I take up 1/3 of my container.</p></div>
</div></textarea></div>
<p>Using the CSS <code>text-align</code> property on the containing grid tells the units inside of a grid how to align.  We will also reset the centering so that subsequent content is left-aligned.</p>

<div id="syntax-e83de303ac5830051a6c6ffc3da080e4" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1">&lt;style<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui3-u-<span class="nu0">1</span>-3</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&lt;/style<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;">&lt;style<span class="sy0">&gt;</span>
<span class="re0">#demo</span> <span class="br0">&#123;</span>
    <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#demo</span> <span class="re1">.yui3-u-<span class="nu0">1</span>-3</span> <span class="br0">&#123;</span>
    <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&lt;/style<span class="sy0">&gt;</span></pre></div><textarea id="syntax-e83de303ac5830051a6c6ffc3da080e4-plain"><style>
#demo {
    text-align: center;
}

#demo .yui3-u-1-3 {
    text-align: left;
}
</style></textarea></div>
<h4>Vertical Alignment</h4>
<p>Vertical alignment tells mixed height units how they should align relative to one another, so at least 2 units are required.</p>
<div id="syntax-d27d32f6c3e0257d1d9e588365d77985" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-g thumb-captions&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;80&quot;</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;60&quot;</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;museum.jpg&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">            Lorem ispum</div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;80&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;60&quot;</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;museum.jpg&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">            Lorem ispum</div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;80&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;60&quot;</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;museum.jpg&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">            Lorem ispum</div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-g thumb-captions&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;80&quot;</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;60&quot;</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;museum.jpg&quot;</span>&gt;</span>
            Lorem ispum
        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;80&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;60&quot;</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;museum.jpg&quot;</span>&gt;</span>
            Lorem ispum
        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#&quot;</span>&gt;&lt;<span class="kw2">img</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">&quot;80&quot;</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">&quot;60&quot;</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;museum.jpg&quot;</span>&gt;</span>
            Lorem ispum
        <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-d27d32f6c3e0257d1d9e588365d77985-plain"><div class="yui3-g thumb-captions">
    <div class="yui3-u-1-3">
        <a href="#"><img width="80" height="60" src="museum.jpg">
            Lorem ispum
        </a>
    </div>
    <div class="yui3-u-1-3">
        <a href="#"><img height="80" width="60" src="museum.jpg">
            Lorem ispum
        </a>
    </div>
    <div class="yui3-u-1-3">
        <a href="#"><img height="80" width="60" src="museum.jpg">
            Lorem ispum
        </a>
    </div>
</div></textarea></div>
<p>Each unit needs to be told how it should align using the CSS <code>vertical-align</code> property.  In this case, we want them all to be bottom aligned.</p>

<div id="syntax-99b853725a4fa5d38c08457bdc57168b" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1">&lt;style<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="re1">.thumb-captions</span> <span class="re1">.yui3-u-<span class="nu0">1</span>-3</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw1">bottom</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&lt;/style<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;">&lt;style<span class="sy0">&gt;</span>
<span class="re1">.thumb-captions</span> <span class="re1">.yui3-u-<span class="nu0">1</span>-3</span> <span class="br0">&#123;</span>
    <span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw1">bottom</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&lt;/style<span class="sy0">&gt;</span></pre></div><textarea id="syntax-99b853725a4fa5d38c08457bdc57168b-plain"><style>
.thumb-captions .yui3-u-1-3 {
    vertical-align: bottom;
}
</style></textarea></div>
<h4>Vertically Center a Single Unit</h4>
<p>Its possible to vertically center a single unit, although a second stub unit is required for it to align with.</p>
<div id="syntax-f3f8d11cd12652a1553c3577ba05b194" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-g&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u align-stub&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-g&quot;</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u align-stub&quot;</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-u-1-3&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis.<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-f3f8d11cd12652a1553c3577ba05b194-plain"><div class="yui3-g" id="demo">
    <div class="yui3-u align-stub"></div>
    <div class="yui3-u-1-3">
        <p>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis.</p>
    </div>
</div></textarea></div>
<p>Setting the height of the stub to the desired height of the container allows the content to align with the middle of the stub, vertically centered in the container.  Setting the <code>vertical-align</code> CSS property for both units tells them how to behave with repsect to the other units.</p>

<div id="syntax-dbe893e259e6d6a7f6ca23b9ad981cc4" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1">&lt;style<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.align-stub</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> .align-stub<span class="sy0">,</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-u-<span class="nu0">1</span>-3</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&lt;/style<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;">&lt;style<span class="sy0">&gt;</span>
<span class="re0">#demo</span> <span class="re1">.align-stub</span> <span class="br0">&#123;</span>
    <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#demo</span> .align-stub<span class="sy0">,</span>
<span class="re0">#demo</span> <span class="re1">.yui-u-<span class="nu0">1</span>-3</span> <span class="br0">&#123;</span>
    <span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&lt;/style<span class="sy0">&gt;</span></pre></div><textarea id="syntax-dbe893e259e6d6a7f6ca23b9ad981cc4-plain"><style>
#demo .align-stub {
    height: 200px;
}

#demo .align-stub,
#demo .yui-u-1-3 {
    vertical-align: middle;
}
</style></textarea></div>
<h5>Note:</h5>
<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p>
				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    CSS Grids Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../cssgrids/cssgrids-units.html'>Using Units</a></li><li><a href='../cssgrids/cssgrids-fixed.html'>Fixed Page Template</a></li><li><a href='../cssgrids/cssgrids-fluid.html'>Fluid Page Template</a></li><li class='selected'><a href='../cssgrids/cssgrids-align.html'>Aligning Units</a></li><li><a href='../node-menunav/node-menunav-8.html'>Adding Submenus On The Fly (included with examples for MenuNav Node Plugin)</a></li><li><a href='../node-menunav/node-menunav-1.html'>Basic Left Nav (included with examples for MenuNav Node Plugin)</a></li><li><a href='../node-menunav/node-menunav-2.html'>Basic Top Nav (included with examples for MenuNav Node Plugin)</a></li><li><a href='../node-menunav/node-menunav-6.html'>Left Nav With Submenus With Rounded Corners (included with examples for MenuNav Node Plugin)</a></li><li><a href='../node-menunav/node-menunav-5.html'>Left Nav With Submenus With Shadows (included with examples for MenuNav Node Plugin)</a></li><li><a href='../node-menunav/node-menunav-3.html'>Menu Button Top Nav (included with examples for MenuNav Node Plugin)</a></li><li><a href='../node-menunav/node-menunav-7.html'>Skinning Menus Created Using the MenuNav Node Plugin (included with examples for MenuNav Node Plugin)</a></li><li><a href='../node-menunav/node-menunav-4.html'>Split Button Top Nav (included with examples for MenuNav Node Plugin)</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More CSS Grids Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/cssgrids/">User's Guide</a> (external)</li> -->
</ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="selected "><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
